docs: Add getting started and framework setup guides #9126
Conversation
| let locale = typeof window !== 'undefined' && window[localeSymbol]; | ||
| return { | ||
| locale: 'en-US', | ||
| locale: locale || 'en-US', |
There was a problem hiding this comment.
This ensures the client matches the server during hydration when using LocalizedStringProvider during SSR.
| let fn = asset.pipeline === 'illustration' || normalizedPath.includes('@react-spectrum/s2/spectrum-illustrations') ? 'createIllustration' : 'createIcon'; | ||
| return ( | ||
| ` | ||
| `"use client"; |
There was a problem hiding this comment.
Icons are client components because they read from context.
| export {DropIndicator, DropIndicatorContext, DragAndDropContext} from './DragAndDrop'; | ||
| export {Virtualizer} from './Virtualizer'; | ||
| export {DIRECTORY_DRAG_TYPE, isDirectoryDropItem, isFileDropItem, isTextDropItem, SSRProvider, RouterProvider, I18nProvider, useLocale, useFilter, Pressable, Focusable, VisuallyHidden} from 'react-aria'; | ||
| export {DIRECTORY_DRAG_TYPE, isDirectoryDropItem, isFileDropItem, isTextDropItem, SSRProvider, RouterProvider, I18nProvider, isRTL, useLocale, useFilter, Pressable, Focusable, VisuallyHidden} from 'react-aria'; |
There was a problem hiding this comment.
Re-exporting isRTL so it can be used in Next.js server component example.
|
Build successful! 🎉 |
## API Changes
react-aria-components/react-aria-components:isRTL+isRTL {
+ localeString: string
+ returnVal: undefined
+} |
| The documentation for each component includes vanilla CSS and [Tailwind](https://tailwindcss.com) examples. Copy and paste these into your project and make them your own. You can also download each example as a ZIP or open in CodeSandbox or StackBlitz. | ||
|
|
||
| <ExampleSwitcher> | ||
| ```tsx render docs={docs.exports.Select} links={docs.links} props={[]} type="vanilla" files={["starters/docs/src/Select.tsx", "starters/docs/src/Select.css"]} showCoachMark |
There was a problem hiding this comment.
I like the idea of the coachmark, but I don't really like that it looks like a focus ring and that the focus ring when inside it is hard to see, maybe the coachmark ring could be pushed out by 2-4px and have the opacity lowered so it doesn't compete as much with the focus ring? or will that then fail contrast do you think?
not a high priority comment
There was a problem hiding this comment.
it's the Spectrum design for coachmark 🤷
| <Step> | ||
| ### <Counter />Import and assemble the parts | ||
|
|
||
| Each React Aria component renders a single DOM element. Complex components like `Select` compose together multiple parts to build a complete pattern. |
There was a problem hiding this comment.
almost true, but some render 2 elements :-/ and it's confused some people
There was a problem hiding this comment.
when we do this we always use display: contents though right? not sure I have seen this confusion. got an example?
There was a problem hiding this comment.
I swear we just had an issue for this come in, but I've been unable to find it so far. I'll keep looking tomorrow
| useEffect(() => { | ||
| let value = localStorage.getItem('packageManager'); | ||
| if (value) { | ||
| setPackageManager(value); | ||
| } | ||
| }, []); |
There was a problem hiding this comment.
based on the react compiler work i was doing, i think you're supposed to do
let [packageManager, setPackageManager] = useState<Key>(() => {
let value = localStorage.getItem('packageManager');
if (value) {
return value;
}
return 'npm';
});
then you don't set state in a useEffect
There was a problem hiding this comment.
nope, you can't do that because it will break SSR (localStorage doesn't exist on the server / at build time).
I rewrote this in an upcoming PR to use useSyncExternalStore though, which will avoid the flicker on client navigations
| listStyleType: 'none', | ||
| position: 'relative' | ||
| })}> | ||
| {/* <div |
|
|
||
| ### Working with AI | ||
|
|
||
| Use the menu at the top of each page in the docs to open or copy it into your favorite AI assistant. We also have an [MCP server](mcp.html) which can be used directly in your IDE, and [llms.txt](../llms.txt) which can help AI agents navigate the docs. |
There was a problem hiding this comment.
pretty minor but wonder if we could/should add a coach mark to this menu button as well when the user is on this page specifically. Might be overkill tbh
Adds new Getting Started and Framework Setup guides to the new docs.
Getting Started focuses has two main sections: Quick Start, and Build a component from scratch. Quick start emphasizes copying the examples and modifying as needed. Build a component from scratch walks through manually composing the pieces and styling them.
Framework Setup combines content from the previous Client Side Routing, Internationalization, and Server Side Rendering pages into a single page where the content is grouped into a single set of steps by framework.